<template>
  <div>
    <div class="toubudaohang flex ai-c" v-show="isShowDetails">
      <el-radio-group v-model="tabPosition">
        <el-radio-button @click.native="$router.push('/layout/videolist')" label="videolist">视频列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/imgslist')" label="imgslist">图片列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/taglist')" label="taglist">标签列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/classlist')" label="classlist">分类列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/videoaudit')" label="videoaudit">案例审核</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 视频列表内容 -->
    <div class="main-video" v-show="isShowDetails">
      <!-- 全部视频 -->
      <div class="main-all-video">
        <div class="main-all-content">
          <div class="search">
            <div class="search-input">
              <el-input clearable v-model="dataForm.content" placeholder="请输入视频名称/发布者"></el-input>
            </div>
            <!-- 查询 -->
            <div class="btn" @click="searchadminvideoauditpage">
              <el-button></el-button>
            </div>
          </div>
          <!-- 全部视频 -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="未审核" name="first">
              <el-table :data="tables" ref="multipleTable1" tooltip-effect="dark">
                <el-table-column prop="account" width="100" label="发布者">
                </el-table-column>
                <el-table-column prop="tiktokUrl" width="330" label="链接"></el-table-column>
                <el-table-column width="200" label="视频详情">
                  <template slot-scope="scope">
                    <el-image fit="cover" style="width: 100px; height: 100px" :src="scope.row.imgUrl"
                      :preview-src-list="[scope.row.imgUrl]">
                    </el-image>
                  </template>
                </el-table-column>

                <el-table-column prop="scoreCard" label="下载积分">
                </el-table-column>
                <el-table-column prop="uploadScoreCard" label="上传积分">
                </el-table-column>
                <el-table-column prop="userGroupName" label="添加水印">
                  <template slot-scope="scope">
                    <div v-if="scope.row.isWater == 0">否</div>
                    <div v-else>是</div>
                  </template>
                </el-table-column>
                <el-table-column label="视频标签" width="300">
                  <template slot-scope="scope">
                    <div v-if="scope.row.tagVoList">
                      <el-tag style="margin-bottom: 5px" v-for="it in scope.row.tagVoList" :key="it.id">{{ it.name }}
                      </el-tag>
                    </div>
                    <div v-else>无</div>
                  </template>
                </el-table-column>
                <el-table-column prop="roleName" label="视频分类">
                  <template slot-scope="scope">
                    <div v-if="scope.row.categoryVo">
                      {{ scope.row.categoryVo.name }}-{{
                          scope.row.categoryVo.sonCategoryList
                            ? scope.row.categoryVo.sonCategoryList[0].name
                            : ""
                      }}
                    </div>
                    <div v-else>无</div>
                  </template>
                </el-table-column>
                <el-table-column prop="loginTime" label="审核状态">
                  <template slot-scope="scope">
                    <div class="flex ai-c" v-if="scope.row.backAuditStatus == 20">
                      <div class="quan"></div>
                      <span>审核成功</span>
                    </div>
                    <div class="flex ai-c" v-if="scope.row.backAuditStatus == 30">
                      <div class="quan quan1"></div>
                      <span>审核驳回</span>
                    </div>
                    <div class="flex ai-c" v-if="scope.row.backAuditStatus == 10">
                      <div class="quan quan2"></div>
                      <span>审核中</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="introduction" label="视频说明">
                </el-table-column>
                <el-table-column width="150" fixed="right" prop="birthday" label="操作" class="caozuo">
                  <template slot-scope="scope">
                    <div class="two-btn flex jc-sb">
                      <div @click="see(scope.row)" class="del-have-btn cursor" style="margin-right: 10px">
                        查看
                      </div>
                      <div @click="seteditdialogVisible(scope.row)" class="del-have-btn cursor"
                        style="margin-right: 10px">
                        编辑
                      </div>
                      <div class="del-have-btn cursor" @click="setvideoauditVisible(scope.row)">
                        审核
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="已审核" name="second">
              <el-table :data="tables" ref="multipleTable2" tooltip-effect="dark">
                <el-table-column width="100" prop="account" label="发布者">
                </el-table-column>
                <el-table-column prop="tiktokUrl" width="330" label="链接"></el-table-column>
                <el-table-column width="200" label="视频详情">
                  <template slot-scope="scope">
                    <el-image fit="cover" style="width: 100px; height: 100px" :src="scope.row.imgUrl"
                      :preview-src-list="[scope.row.imgUrl]">
                    </el-image>
                  </template>
                </el-table-column>

                <el-table-column prop="scoreCard" label="下载积分">
                </el-table-column>
                <el-table-column prop="uploadScoreCard" label="上传积分">
                </el-table-column>
                <el-table-column prop="userGroupName" label="添加水印">
                  <template slot-scope="scope">
                    <div v-if="scope.row.isWater == 0">否</div>
                    <div v-else>是</div>
                  </template>
                </el-table-column>
                <el-table-column label="视频标签" width="300">
                  <template slot-scope="scope">
                    <div v-if="scope.row.tagVoList">
                      <el-tag style="margin-bottom: 5px" v-for="it in scope.row.tagVoList" :key="it.id">{{ it.name }}
                      </el-tag>
                    </div>
                    <div v-else>无</div>
                  </template>
                </el-table-column>
                <el-table-column prop="roleName" label="视频分类">
                  <template slot-scope="scope">
                    <div v-if="scope.row.categoryVo">
                      {{ scope.row.categoryVo.name }}-{{
                          scope.row.categoryVo.sonCategoryList
                            ? scope.row.categoryVo.sonCategoryList[0].name
                            : ""
                      }}
                    </div>
                    <div v-else>无</div>
                  </template>
                </el-table-column>
                <el-table-column prop="loginTime" label="审核状态" style="">
                  <template slot-scope="scope">
                    <el-popover placement="top" width="200" trigger="hover">
                      <div class="flex tiamnehss">
                        <div style="margin-right: 10px; margin-bottom: 10px">
                          审核时间
                        </div>
                        <div>{{ scope.row.auditTime }}</div>
                      </div>
                      <div class="flex tiamnehss">
                        <div style="margin-right: 10px; margin-bottom: 10px">
                          审核人员
                        </div>
                        <div>admin</div>
                      </div>
                      <div class="flex tiamnehss">
                        <div style="margin-right: 10px; margin-bottom: 10px">
                          驳回原因
                        </div>
                        <div>{{ scope.row.remark }}</div>
                      </div>
                      <div class="flex ai-c cursor" slot="reference" v-show="scope.row.backAuditStatus == 30">
                        <div class="quan quan1"></div>
                        <span>审核驳回</span>
                      </div>
                    </el-popover>
                    <el-popover placement="top" width="200" trigger="hover">
                      <div class="flex tiamnehss">
                        <div style="margin-right: 10px; margin-bottom: 10px">
                          审核时间
                        </div>
                        <div>{{ scope.row.auditTime }}</div>
                      </div>
                      <div class="flex tiamnehss">
                        <div style="margin-right: 10px; margin-bottom: 10px">
                          审核人员
                        </div>
                        <div>admin</div>
                      </div>
                      <div slot="reference" class="flex ai-c cursor" v-show="scope.row.backAuditStatus == 20">
                        <div class="quan"></div>
                        <span>审核成功</span>
                      </div>
                    </el-popover>
                    <div class="flex ai-c" v-if="scope.row.backAuditStatus == 10">
                      <div class="quan quan2"></div>
                      <span>审核中</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="introduction" label="视频说明" style="">
                </el-table-column>
                <el-table-column width="150" fixed="right" prop="birthday" label="操作" class="caozuo">
                  <template slot-scope="scope">
                    <div class="two-btn flex">
                      <div @click="see(scope.row)" class="del-have-btn cursor" style="margin-right: 10px">
                        查看
                      </div>
                      <div class="del-have-btn cursor" @click="
                        (Completelydelete = true), (videoId = scope.row.id)
                      ">
                        删除
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!-- 分页 -->
            <div class="page flex jc-c ai-c">
              <div class="page-numBer">
                <div class="block">
                  <el-pagination background layout="prev, pager, next" :total="total" :page-size="dataForm.pageSize"
                    :current-page="dataForm.pageNo" @current-change="currentchangehuishou">
                  </el-pagination>
                </div>
              </div>
            </div>
          </el-tabs>
        </div>
      </div>
      <!-- 标签列表 -->

      <!-- 分类列表 -->
    </div>
    <v-videodetails v-if="!isShowDetails" @edidshow="clickquery" @back="backfan" :info="info"
      @audit="setvideoauditVisible" :activeName="activeName" />
    <el-dialog title="视频审核" center :visible.sync="videoauditVisible" width="445px">
      <el-form :model="auditForm" :rules="rules" ref="auditForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="审核状态" prop="status">
          <el-radio-group v-model="auditForm.status">
            <el-radio :label="20">审核通过</el-radio>
            <el-radio :label="30">审核驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="驳回原因" v-if="auditForm.status == 30" prop="remark">
          <el-input type="textarea" :rows="6" v-model="auditForm.remark"></el-input>
        </el-form-item>
        <span class="dialog-footer flex jc-c">
          <el-button class="cancelbtn" @click="videoauditVisible = false">取 消</el-button>
          <el-button class="surebtn" @click="submitForm('auditForm')">确 定</el-button>
        </span>
      </el-form>
    </el-dialog>
    <el-dialog title="视频编辑" center :visible.sync="editdialogVisible" width="445px">
      <el-form :model="editForm" :rules="rulesedit" ref="editForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="上传积分" prop="uploadScoreCard">
          <el-input placeholder="请输入上传积分" type="number" v-model="editForm.uploadScoreCard"></el-input>
        </el-form-item>
        <el-form-item label="下载积分" prop="scoreCard">
          <el-input placeholder="请输入积分" type="number" v-model="editForm.scoreCard"></el-input>
        </el-form-item>
        <el-form-item label="添加水印" prop="isWater">
          <el-radio-group v-model="editForm.isWater">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="视频标签" prop="tagIds">
          <el-select style="width: 100%" v-model="editForm.tagIds" multiple :reserve-keyword="true" default-first-option
            :filterable="true" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频分类" prop="categoryId">
          <el-cascader style="width: 100%" v-model="editForm.categoryId" :props="{
            children: 'sonCategoryList',
            value: 'id',
            label: 'name',
            emitPath: false,
          }" :options="optionscates"></el-cascader>
        </el-form-item>
        <el-form-item label="视频说明">
          <el-input type="text" placeholder="请输入视频说明" v-model="editForm.introduction"></el-input>
        </el-form-item>
        <span class="dialog-footer flex jc-c">
          <el-button class="cancelbtn" @click="editdialogVisible = false">取 消</el-button>
          <el-button class="surebtn" @click="submiteditForm('editForm')">确 定</el-button>
        </span>
      </el-form>
    </el-dialog>
    <!-- 彻底删除 -->
    <el-dialog title="彻底删除" center :visible.sync="Completelydelete" width="445px">
      <div class="flex fd-c jc-c ai-c">
        <span>删除后不可恢复,确认删除?</span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="Completelydelete = false">取 消</el-button>
        <el-button class="surebtn" @click="adminvideodelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import videodetails from "@/component/videodetails.vue";
import {
  adminvideoauditinfo,
  adminvideoauditpage,
  adminvideoaudit,
  adminvideoeditaudit,
  admintagalllist,
  admincategorypage,
  adminvideodelete,
  adminvideoinfoAdmin,
} from "@/api/index";
export default {
  components: {
    "v-videodetails": videodetails,
  },
  // 存放数据
  data() {
    return {
      tabPosition: "videoaudit",
      tables: [],
      tables1: [],
      activeName: "first",
      Completelydelete: false,
      removedialogVisible: false,
      videoauditVisible: false,
      content: "",
      edittagIds: [],
      options: [],
      dataForm: {
        content: "",
        pageNo: 1,
        pageSize: 5,
        status: 10,
      },
      auditForm: {
        status: 20,
        remark: "",
        videoId: "",
      },
      rules: {
        status: [{ required: true, message: "请选择", trigger: "change" }],
        remark: [
          { required: true, message: "请填写驳回原因", trigger: "blur" },
        ],
      },
      rulesedit: {
        categoryId: [{ required: true, message: "请选择", trigger: "change" }],
        scoreCard: [{ required: true, message: "请填写", trigger: "blur" }],
        uploadScoreCard: [{ required: true, message: "请填写", trigger: "blur" }],
        isWater: [{ required: true, message: "请选择", trigger: "change" }],
        tagIds: [{ required: true, message: "请选择", trigger: "change" }],
      },
      editForm: {
        categoryId: "",
        id: "",
        introduction: "",
        isWater: 0,
        scoreCard: "",
        tagIds: [],
        uploadScoreCard: ''
      },
      editdialogVisible: false,
      optionscates: [],
      total: 0,
      videoId: "",
      info: {},
      isShowDetails: true,
    };
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f2f2f2;");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
  created() {
    this.admincategorypage();
    this.admintagalllist();
    this.adminvideoauditpage();
  },
  filters: {},
  methods: {
    backfan() {
      // this.info = {};
      this.isShowDetails = true;
    },
    clickquery(item) {
      this.editForm = item;
      this.$set(this.editForm, "tagIds", []);
      this.editForm.tagIds = item.tagVoList.map((it) => it.id);
      admincategorypage({
        partitionType: item.partitionId || "",
      }).then((res) => {
        this.editdialogVisible = true;
        this.optionscates = res.data;
      });
    },
    adminvideodelete() {
      this.Completelydelete = false;
      adminvideodelete({
        videoId: this.videoId,
      }).then((res) => {
        this.adminvideoauditpage();
        this.$message.success("删除成功");
      });
    },
    see(item) {
      adminvideoinfoAdmin({
        videoId: item.id,
      }).then((res) => {
        this.info = res.data;
        this.isShowDetails = false;
      });
    },
    currentchangehuishou(val) {
      this.dataForm.pageNo = val;
      this.adminvideoauditpage();
    },
    seteditdialogVisible(item) {
      this.editdialogVisible = true;
      this.editForm = {
        categoryId: item.categoryId,
        id: item.id,
        introduction: item.introduction,
        isWater: item.isWater,
        scoreCard: item.scoreCard,
        tagIds: [],
        uploadScoreCard: item.uploadScoreCard
      };
      if (item.tagVoList)
        item.tagVoList.forEach((it) => {
          this.editForm.tagIds.push(it.id);
        });
    },
    admincategorypage() {
      admincategorypage({
        status: 10,
        partitionType: 2,
      }).then((res) => {
        this.optionscates = res.data;
      });
    },
    admintagalllist() {
      admintagalllist({}).then((res) => {
        this.options = res.data;
      });
    },
    adminvideoeditaudit() {
      adminvideoeditaudit(this.editForm).then((res) => {
        this.$message.success("编辑成功");
        this.isShowDetails = true;
        this.adminvideoauditpage();
        this.editForm = {
          categoryId: "",
          id: "",
          introduction: "",
          isWater: 0,
          scoreCard: "",
          tagIds: [],
          uploadScoreCard: ''
        };
      });
    },
    adminvideoaudit() {
      adminvideoaudit(this.auditForm).then((res) => {
        this.$message.success("审核成功");
        this.adminvideoauditpage();
        this.isShowDetails = true;
        this.auditForm = {
          status: 20,
          remark: "",
        };
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.videoauditVisible = false;
          this.adminvideoaudit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submiteditForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editdialogVisible = false;
          this.adminvideoeditaudit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    setvideoauditVisible(item) {
      this.videoauditVisible = true;
      this.auditForm.videoId = item.id;
    },
    adminvideoauditinfo() {
      adminvideoauditinfo();
    },
    adminvideoauditpage() {
      adminvideoauditpage(this.dataForm).then((res) => {
        this.tables = res.data.list;
        this.total = res.data.total;
      });
    },
    searchadminvideoauditpage() {
      this.dataForm.pageNo = 1;
      this.adminvideoauditpage();
    },
    handleClick(val) {
      console.log(this.activeName);
      if (val.index == 0) {
        this.dataForm.status = 10;
        this.dataForm.pageNo = 1;
        this.adminvideoauditpage();
      } else {
        this.dataForm.status = 20;
        this.dataForm.pageNo = 1;
        this.adminvideoauditpage();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
// 头部内容
.header {
  width: 100%;
  min-width: 1200px;
  height: 35px;
  display: flex;
  padding-top: 10px;

  justify-content: space-around;
  background-color: rgb(84, 92, 100);

  .header-left {
    margin-top: -4px;
    margin-left: 87px;
    color: white;

    span {
      display: inline-block;
      margin-left: 10px;
      font-size: 28px;
      font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
      font-weight: 700;
    }
  }

  .navVideo {
    width: 120px;
    height: 41px;

    border-bottom: 1px solid rgb(255, 208, 75);
    border-bottom-color: rgb(255, 208, 75);

    a {
      color: rgb(255, 208, 75) !important;
    }
  }

  .header-nav {
    width: 787px;
    position: relative;
    top: -7px;
    margin-right: 458px;
  }

  .header-nav>div {
    display: flex;

    justify-content: space-between;

    a {
      color: white;
      font-size: 18px;
      font-weight: 700;
      text-decoration: none;
    }
  }

  .header-login {
    width: 200px;
    display: flex;
    justify-content: space-around;
  }

  .header-user {
    position: relative;
    margin-top: 3px;
  }

  span {
    font-size: 14px;
    display: inline-block;
    margin-right: 10px;
  }

  img {
    position: absolute;
    top: 9px;
  }

  .header-out {
    margin-top: 3px;
  }
}

.main-video {
  // width: 100%;
  // min-width: 1025px;
  margin-top: 24px;
}

// 视频列表
.video {
  width: 100%;
  margin-top: 24px;
  min-width: 1200px;

  .list-content {
    width: 1378px;
    height: 52px;
    padding-left: 53px;
    margin: 0 auto;
    display: flex;
    min-width: 1200px;
    background-color: white;
  }

  .list-content>div {
    width: 112px;
    height: 30px;

    margin-top: 12px;
    border-color: #aaaaaa;
    // border-radius: 5px;

    // border-top-right-radius: 0px;
    // border-bottom-right-radius: 0px;
    box-sizing: border-box;
    border: 1px solid #aaaaaa;
    text-align: center;
  }

  .list-content>div:hover {
    cursor: pointer;
  }

  a {
    font-size: 13px;
    text-decoration: none;
    margin-top: 5px;
    color: #333333;
    display: inline-block;
  }
}

.sure-del {
  margin-left: 10px;
}

.active {
  background-color: #aaaaaa;

  a {
    color: white;
  }
}

// 全部视频
.main-all-video {
  // width: 100%;
  // min-width: 1200px;
  margin-top: 24px;

  .main-all-content {
    // height: 772px;
    background: #ffffff;
    box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
    border-radius: 16px;
    position: relative;
    padding-left: 53px;
    background-color: white;
    box-sizing: border-box;
    padding-top: 20px;
    box-sizing: border-box;
    padding-right: 15px;
    // min-height: calc(100vh - 229px);

    .search {
      width: calc(100% - 400px);
      display: flex;
      position: relative;
      margin: 0 auto;
      justify-content: flex-end;
      align-items: center;
      font-weight: 400;
      color: #000000;
      margin-bottom: 48px;
      position: absolute;
      right: 15px;
      top: 10px;
      z-index: 10;

      .search-input {
        // width: 250px;
        // margin-top: 3px;
      }

      .choose-label {
        width: 150px;
        margin-left: 20px;
      }

      .choose-Select {
        margin-left: 20px;

        input {
          width: 153px;
        }
      }

      .btn {
        margin-left: 15px;

        // margin-top: 1px;
        button {
          width: 61px;
          height: 40px;
          background-size: 19px 20px;
          border: none;
          background-repeat: no-repeat;
          background-position: center;
          text-align: center;
          background-color: #ff5478;
          background-image: url("../assets/btnsearch.png");
          align-items: center;

          span {
            text-align: center;
          }
        }
      }
    }
  }
}

.page-select .el-input__inner {
  height: 21px;
}

.page-select-back {
  margin-top: 4px;
  width: 100px;
}

.el-button {
  padding: 11px 20px;
}

.el-tabs__item {
  height: 22px !important;
  line-height: 13px !important;
}

// 全部视频内容
.video-content {
  width: 100%;
  margin-top: 10px;
  // justify-content: flex-start;
  // margin-left: 25px;
  border-bottom: 1px solid #e4e7ed;
  // display: flex;
}

.recycle {
  color: #ff5478;
  text-decoration: none;
}

.video-pic {
  margin-right: 35px;
  // padding-bottom: 15px;
}

.video-text {
  // width: 750px;
  position: relative;

  p {
    margin-bottom: 9px;
  }
}

.del-btn {
  // width: 146px;
  height: 35px;
  display: flex;
  margin-top: 30px;
  // background-color: white;

  button {
    width: 89px;
    height: 35px;
    margin-right: 15px;
    padding-top: 10px;
    text-align: center;
    // color: white;
    // background-color: #f56c6c;
    // border: 1px solid #f56c6c;
    outline: none;
    cursor: pointer;
    border-radius: 5px;
  }

  .Completelydelete {
    width: 100px;
  }
}

.recovery-btn {
  display: flex;
  height: 35px;
  margin-top: 30px;

  button {
    padding-top: 10px;
  }
}

.tag {
  span {
    display: inline-block;
    margin-bottom: 10px;

    margin-right: 20px;
  }
}

.video-title {
  color: #333333;
  font-size: 14px;
}

.video-say {
  font-size: 14px;
  color: #7f7f7f;
}

.video-time {
  // width: 700px;
  display: flex;
  justify-content: flex-start;
  margin-left: 3px;

  .name {
    font-size: 14px;
    color: #7f7f7f;
    margin-left: 18px;
    margin-right: 24px;
  }

  .time {
    font-size: 14px;
    color: #333333;
    margin-right: 24px;
    margin-left: 25px;
  }

  .case {
    font-size: 14px;
    color: #7f7f7f;
  }

  // 审核通过
  .pass {
    color: #58c192;
    font-size: 14px;
  }
}

.linepic {
  margin-right: 20px;
}

.el-tabs__nav-wrap::after {
  width: 98%;
}

// 分页

.page {
  // position: absolute;
  // left: 50%;
  // bottom: 15px;
  // transform: translate(-50%, 0);
  width: 100%;
  margin-bottom: 10px;
  // margin-top: 30vh;
}

.page-numBer {
  margin-top: 10px;
}

.page input {
  height: 21px !important;
}

.five-page {
  width: 96px;
}

.page-num {
  width: 55px;
  margin-top: 16px;
  // margin-right: 15px;
}

span {
  font-size: 14px;
}

.page-select-back .el-input {
  margin-right: 15px;
  width: 100px;

  input {
    padding-right: 35px;
    width: 113px;
  }
}

.page-select-fen {
  margin-right: 15px;
  margin-top: 4px;
  width: 100px;

  input {
    padding-right: 35px;
    width: 113px;
  }
}

.el-select .el-input__inner {
  cursor: pointer;
}

.go-page {
  width: 500px;
  margin-top: 13px;

  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }

  input {
    width: 35px;
    outline: none;
    border-radius: 3px;
    height: 25px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}

.el-input__icon {
  line-height: 21px !important;
}

// 标签列表
.tagList {
  width: 1378px;
  margin-top: 15px;
  height: 697px;
  min-width: 1200px;
  margin: 0 auto;
  margin-top: 15px;
  padding-left: 53px;
  background-color: white;
}

.tagContent {
  width: 1378px;
  position: relative;
  min-width: 1200px;
  display: flex;

  justify-content: center;
}

.tagCenter {
  width: 1240px;

  margin-left: 25px;
  border-top: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
}

.tagText {
  margin-top: 15px;

  p {
    font-size: 14px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 13px;
  }
}

.tag-last {
  border-bottom: none;
}

.tagOne {
  // width: 700px;
  border-bottom: 1px solid #e4e7ed;

  button {
    width: 70px !important;
    height: 41px !important;
    padding: 12px 7px !important;
  }

  span {
    display: inline-block;
    // margin-right: 20px;
    margin-bottom: 20px;
  }
}

.tag-input {
  width: 300px;
  position: relative;
  height: 35px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tag-btn {
  position: absolute;
  margin-top: 20px;

  margin-bottom: 20px;
  right: 372px;

  button {
    text-align: center;
    align-items: center;
  }
}

// .el-tabs__header {
//    width: 500px !important;
// }
// .el-tabs__header .is-top {
//  width: 500px !important;
// }
.el-tabs__nav-wrap {
  margin-top: 15px !important;
}

// 标签
.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

// 分类列表
.user-list {
  width: 1429px;
  margin-top: 15px;
  height: 535px;
  min-width: 1200px;
  padding-bottom: 105px;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  margin-top: 15px;
  // padding-left: 53px;

  background-color: white;
}

.user-left {
  width: 200px;
  padding-right: 10px;
  border-right: 1px solid #f2f2f2;
  margin-top: 40px;
}

.user-right {
  width: 990px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 38px;
}

.user-input {
  width: 300px;
  height: 0px;
  margin-right: 30px;

  input {
    width: 300px;
  }
}

.user-select {
  margin-right: 23px;
  height: 0px;
}

.form-list {
  width: 901px;
  margin-bottom: 24px;
  border-radius: 3px;

  table {
    width: 898px;
    height: 30px;
    text-align: center;
    margin-top: 35px;
    // border: 1px solid #ebebeb;

    tr {
      height: 30px;
      line-height: 30px;

      td {
        width: 130px;
        height: 50px;
        line-height: 50px;
        font-size: 13px;
        // border-right: 1px solid #ebebeb;
        // border-bottom: 1px solid #ebebeb;

        // border-top: 1px solid #ebebeb;

        border: 1px solid #ebebeb;

        .three-btn {
          width: 300px;

          margin: 0 auto;
          justify-content: center;
          text-align: center;
          display: flex;
        }

        button {
          width: 61px;
          padding: 11px 15px;
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
.toubudaohang {
  width: 100%;
  height: 84px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding-left: 30px;
  box-sizing: border-box;
}
</style>
<style scoped lang="scss">
.main-all-content ::v-deep .el-tabs__content {
  position: static;
}
</style>
<style scoped>
.quan {
  width: 10px;
  height: 10px;
  background: #46db5f;
  border-radius: 50%;
  margin-right: 5px;
}

.quan1 {
  background: #f06565;
}

.quan2 {
  background: #ff9036;
}

.two-btn {
  color: #ff5478;
}
</style>
<style scoped lang="scss">
.tiamnehss {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #2f3034;
  // margin-bottom: 10px;
}
</style>